<script lang="ts" setup>
import { todayData } from '@/api/visualization'
interface listType {
  price: number,
  title: string
}
let list = ref<listType[]>()
let titleMap: { [key: string]: string } = { allAmount: '今日成交金额', payNum: '支付订单数', registerNum: '注册用户数', payRate: '支付成功率' }

onMounted(async () => {
  const res = await todayData()
  if (res.code === 0) {
    // 接口返回的数据转成echarts要求的数据格式
    list.value = Object.keys(res.data).map((key) => {
      return {
        title: titleMap[key],
        price: (res.data[key] && res.data[key] !== 'NaN') ? res.data[key] : 0
      }
    })
  }
})



</script>

<template>
  <div h-56 w-96 flex="~ col" bg="[url(@/assets/image/border/TodayCurrentDataBorder.png)] no-repeat center cover">
    <div p="x-8 t-4" text="#17caf0 5.5" font="bold">今日实时数据</div>
    <div grid="~ rows-2 cols-2" gap="x-8 y-4">
      <div flex="~ col" v-for="item in list">
        <span text="8 #00ffc3 center">
          {{ item.price }}
        </span>
        <span text="4 white center">{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>